<template>
  <a-tabs ref="layoutTabRef" :lazy-load="true" :active-key="tabKey" @change="tabchange">
    <template #extra>
      <a-space>
        <a-button type="primary" @click="selectClick">查询</a-button>
        <a-button type="primary" status="success" @click="addJwt">新增</a-button>
        <a-button type="primary" @click="updataClick">修改</a-button>
        <a-button type="primary" @click="deletClick">删除</a-button>
      </a-space>
    </template>
    <a-tab-pane :key="index" :title="z.story" v-for="(z, index) in ArrayList">
      <div style="width: 100%; height: 80%; overflow: auto">
        <div class="layoutBox">
          <grid-layout
            :ref="'gridlayouts' + index"
            :key="index"
            :layout.sync="z.detail.layout"
            :col-num="z.detail.form.long"
            :row-num="z.detail.form.wides"
            :row-height="z.detail.form.heigt"
            :col-width="z.detail.form.width"
            :responsive="false"
            :vertical-compact="false"
            :prevent-collision="false"
            :use-css-transforms="false"
            :is-draggable="false"
            :is-resizable="false"
            class="grid_cals2"
          >
            <div>
              <grid-item
                v-for="item in z.detail.backgroundData"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :key="item.i"
                :is-draggable="false"
                :is-resizable="false"
                class="grid-item"
              />
            </div>
            <grid-item
              :key="item.i"
              v-for="item in z.detail.layout"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :i="item.i"
              :style="{
                background: getColor(item.text, item.type),
                zoom: scaleRadio ? scaleRadio : 1,
              }"
            >
              <div class="clmodule" @dblclick="getEdit(item)">
                <div v-if="item.text == '机台'" style="width: 100%; text-align: center">
                  <a-popover title="详情">
                    <a-button
                      type="text"
                      :style="{ color: '#000', width: '100%', height: '100%', padding: '0px' }"
                      size="mini"
                      ><div
                        style="
                          font-size: 10px !important;
                          width: 100% !important;
                          white-space: normal !important;
                          word-break: break-all;
                        "
                        >{{ item.machineName }}</div
                      ></a-button
                    >
                    <template #content>
                      <p>物料大类：{{ item.majorCategory }}</p>
                      <p>物料中类：{{ item.middleCategory }}</p>
                      <p>物料小类：{{ item.subCategory }}</p>
                      <p>物料编号：{{ item.materialCode }}</p>
                      <p>物料名称：{{ item.materialName }}</p>
                      <p>规格：{{ item.specification }}</p>
                      <p>机台编号：{{ item.machineCode }}</p>
                    </template>
                  </a-popover>
                </div>
                <div
                  v-if="item.text == '机台'"
                  :style="{
                    wordBreak: 'break-all',
                    width: '100%',
                    textAlign: 'center',
                    fontWeight: '600',
                    position: 'absolute',
                    bottom: '-5px',
                  }"
                >
                  {{ item.machineCode }}
                </div>
                <div v-if="item.text != '机台'" style="width: 100%; text-align: center"
                  >{{ item.text }}
                </div>
              </div>
            </grid-item>
          </grid-layout>
        </div>
      </div>
      <div style="width: 20%; margin-left: 20px">
        <a-space>
          <div style="width: 30px; height: 30px; background-color: #9fa2a8"></div
          ><span>未启动</span> <div style="width: 30px; height: 30px; background-color: #ccc"></div
          ><span>待单</span>
          <div style="width: 30px; height: 30px; background-color: #ebf13fe1"></div
          ><span>待纱</span>
          <div style="width: 30px; height: 30px; background-color: #c1c460e1"></div
          ><span>洗转机</span>
          <div style="width: 30px; height: 30px; background-color: #1c9a13"></div><span>运行</span>
          <div style="width: 30px; height: 30px; background-color: #2786cf"></div><span>暂停</span>
          <div style="width: 30px; height: 30px; background-color: #cf2762"></div><span>维修</span>
          <div style="width: 30px; height: 30px; background-color: #c127cf"></div><span>保养</span>
        </a-space>
      </div>
    </a-tab-pane>
  </a-tabs>

  <a-drawer
    ok-text="保存"
    cancel-text="关闭"
    :drawer-style="{ zIndex: 9999 }"
    @ok="bc"
    @cancel="handleDrawerClose"
    :width="'100%'"
    :height="'100%'"
    :visible="jwtshowAdd"
    placement="bottom"
    :closable="false"
  >
    <template #title> {{ titles }}自定义机位图 </template>
    <a-space style="margin-top: 5px">
      <a-form-item label="列:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
        <span
          ><a-input-number
            class="bacClass"
            @change="getLong"
            :disabled="disabled"
            v-model="form.longs"
            placeholder="请输入"
        /></span>
      </a-form-item>
      <a-form-item label="行:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
        <span
          ><a-input-number
            class="bacClass"
            :disabled="disabled"
            @change="getLong"
            v-model="form.wides"
            placeholder="请输入"
        /></span>
      </a-form-item>
      <a-form-item label="高:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
        <span
          ><a-input-number
            class="bacClass"
            @change="getLong"
            v-model="form.heigts"
            placeholder="请输入"
        /></span>
      </a-form-item>
      <a-form-item label="宽:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
        <span
          ><a-input-number
            class="bacClass"
            @change="changeWidth"
            v-model="form.width"
            placeholder="请输入"
        /></span>
      </a-form-item>
      <a-form-item label="楼层:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
        <a-select
          popup-container="html"
          allow-search
          allow-clear
          @click="jgCx()"
          style="width: 165px"
          v-model="lcJwt"
          class="bacClass"
        >
          <a-option
            v-for="item in lcJwtArray"
            :value="item.areaName + '&' + item.firmId + '&' + item.firm"
            >{{ item.areaName }}</a-option
          >
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="缩放大小:" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }" class="flexble">
                <a-slider style="width:100px" id="test" v-model="scaleRadios" :default-value="scaleRadios"
                    @change="getZoom" />
            </a-form-item> -->
      <a-button type="primary" @click="generate" v-if="!disabled" :disabled="disabled"
        >生成机位图</a-button
      >
      <a-button type="primary" @click="getreset" v-else>重置</a-button>
      <!-- <a-button type="primary" @click="getqw">保存机位图</a-button> -->
      <span style="fontsize: 20px; color: red">双击选择机台</span>
    </a-space>
    <!-- 机位图 -->
    <div v-if="layeshow" class="box">
      <div style="width: 100vw; display: flex">
        <div>
          <div
            @drag="drag"
            @dragend="dragend('operate')"
            class="operate"
            draggable="true"
            unselectable="on"
          >
            机台
          </div>
          <div
            @drag="drag"
            @dragend="dragend('Shelves')"
            class="Shelves"
            draggable="true"
            unselectable="on"
          >
            其他
          </div>
          <div
            @drag="drag"
            @dragend="dragend('passage')"
            class="passage"
            draggable="true"
            unselectable="on"
          >
            通道
          </div>
        </div>
        <div style="width: 95%; flex: 1">
          <div id="content" class="layoutBox" :style="`zoom:${scaleRadio ? scaleRadio : 1}`">
            <grid-layout
              ref="gridlayout"
              :layout.sync="layout"
              :col-num="form.long"
              :row-num="form.wides"
              :row-height="form.heigt"
              :col-width="form.width"
              :responsive="false"
              :vertical-compact="false"
              :prevent-collision="true"
              :use-css-transforms="true"
              :is-draggable="true"
              :is-resizable="true"
              class="grid_cals"
            >
              <div>
                <grid-item
                  v-for="item in backgroundData"
                  :x="item.x"
                  :y="item.y"
                  :w="item.w"
                  :h="item.h"
                  :i="item.i"
                  :key="item.i"
                  :is-draggable="false"
                  :is-resizable="false"
                  class="grid-item"
                />
              </div>
              <grid-item
                :key="item.i"
                v-for="item in layout"
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :style="{ background: getColor(item.text, item.type) }"
              >
                <div class="clmodule" @dblclick="getEdit(item)">
                  <!-- <p>物料大类：{{ item.majorCategory }}</p>
                                    <p>物料中类：{{ item.middleCategory }}</p>
                                    <p>物料小类：{{ item.subCategory }}</p>
                                    <p>物料编号：{{ item.materialCode }}</p>
                                    <p>物料名称：{{ item.materialName }}</p>
                                    <p>规格：{{ item.specification }}</p> -->
                  <div v-if="item.text == '机台'" style="width: 100%; text-align: center">
                    <a-popover title="详情">
                      <!-- {{item.materialCode}}<br> -->
                      <!-- <p>D030000002</p> -->
                      <a-button
                        type="text"
                        :style="{ color: '#000', width: '100%', height: '100%', padding: '0px' }"
                        size="mini"
                        ><div
                          style="
                            font-size: 11px !important;
                            width: 100% !important;
                            white-space: normal !important;
                            word-break: break-all;
                          "
                          >{{ item.machineName }}</div
                        ></a-button
                      >
                      <template #content>
                        <p>物料大类：{{ item.majorCategory }}</p>
                        <p>物料中类：{{ item.middleCategory }}</p>
                        <p>物料小类：{{ item.subCategory }}</p>
                        <p>物料编号：{{ item.materialCode }}</p>
                        <p>物料名称：{{ item.materialName }}</p>
                        <p>规格：{{ item.specification }}</p>
                        <p>机台编号：{{ item.machineCode }}</p>
                        <p
                          >删除元素<icon-close-circle-fill
                            style="cursor: pointer"
                            @click="dele(item.i)"
                        /></p>
                      </template>
                    </a-popover>
                  </div>
                  <div
                    v-if="item.text == '机台'"
                    :style="{
                      wordBreak: 'break-all',
                      width: '100%',
                      textAlign: 'center',
                      fontWeight: '600',
                      position: 'absolute',
                      bottom: '-7px',
                    }"
                  >
                    {{ item.machineCode }}
                  </div>
                  <icon-close-circle-fill
                    style="cursor: pointer"
                    v-if="item.text != '机台'"
                    @click="dele(item.i)"
                  />
                  <div v-if="item.text != '机台'" style="width: 100%; text-align: center"
                    >{{ item.text }}
                  </div>
                </div>
              </grid-item>
            </grid-layout>
          </div>
        </div>
      </div>
    </div>
  </a-drawer>

  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="visible = false" width="auto">
    <template #title> 选择机台 </template>
    <a-select
      popup-container="html"
      allow-search
      allow-clear
      @click="visibleszzz()"
      style="width: 165px"
      v-model="visibles"
      class="bacClass"
    >
      <a-option
        v-for="item in visiblesList"
        :value="
          item.majorCategory +
          '&' +
          item.middleCategory +
          '&' +
          item.subCategory +
          '&' +
          item.materialCode +
          '&' +
          item.materialName +
          '&' +
          item.specification +
          '&' +
          item.machineCode +
          '&' +
          item.id +
          '&' +
          item.machineName
        "
        >{{ item.machineName + '——' + item.machineCode }}</a-option
      >
    </a-select>
  </a-modal>
</template>

<script setup>
  import { post, get } from '@/api/http'
  import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
  import { Message } from '@arco-design/web-vue'
  const instance = getCurrentInstance()
  const titles = ref('新增')
  const layoutTabRef = ref(null)
  const tabKey = ref(0)
  const tabchange = (val) => {
    console.log('valval', val)
    tabKey.value = val
    console.log('arr', ArrayList.value)
    const width = ArrayList.value[val].detail.form.width
    const { form } = ArrayList.value[val].detail
    if (width) {
      nextTick(() => {
        console.log('enter', instance.refs['gridlayouts' + val][0])
        instance.refs['gridlayouts' + val][0].$el.style.width = `${
          width * form.longs + (form.longs + 1) * 10
        }px`
      })
    }
  }
  const jwtshowAdd = ref(false)
  const lcJwt = ref()
  const lcJwtArray = ref([])
  const visible = ref(false)
  const visibles = ref('')
  const visiblesList = ref([])

  const ArrayList = ref()
  const handleDrawerClose = () => {
    jwtshowAdd.value = false
    form.long = 20
    form.longs = 20
    form.wide = 10
    form.wides = 10
    form.heigt = 50
    form.heigts = 50
    form.width = 50
    layout.value = []
    backgroundData.value = []
  }
  const selectClick = () => {
    return new Promise((resolve) => {
      post({
        url: 'planSingle/machineLayout/getScheduleInfo',
      }).then(({ data, code }) => {
        if (code == 200) {
          ArrayList.value = data
          ArrayList.value.forEach((item) => {
            item.detail = JSON.parse(item.detail)
          })
          console.log(ArrayList.value)
          resolve(ArrayList.value)
        }
      })
    })
  }

  const deletClick = (res) => {
    post({
      url: 'planSingle/machineLayout/delete',
      data: [ArrayList.value[tabKey.value].id],
    }).then(({ code }) => {
      if (code == 200) {
        selectClick()
        tabKey.value = 0
      }
    })
  }

  const handleOk = () => {
    console.log(layout.value)
    for (let i = 0; i < layout.value.length; i++) {
      if (layout.value[i].machineCode == visibles.value.split('&')[6]) {
        Message.error('请勿选择重复机台')
        return
      }
    }
    items.majorCategory = visibles.value.split('&')[0]
    items.middleCategory = visibles.value.split('&')[1]
    items.subCategory = visibles.value.split('&')[2]
    items.materialCode = visibles.value.split('&')[3]
    items.materialName = visibles.value.split('&')[4]
    items.specification = visibles.value.split('&')[5]
    items.machineCode = visibles.value.split('&')[6]
    items.id = Number(visibles.value.split('&')[7])
    items.machineName = visibles.value.split('&')[8]
  }

  const visibleszzz = () => {
    if (!lcJwt.value) {
      Message.error('请选择楼层')
      return
    }
    post({
      url: 'planSingle/machine/getMachineByAera',
      data: {
        firmId: Number(lcJwt.value.split('&')[1]),
        story: lcJwt.value.split('&')[0],
      },
    }).then(({ data }) => {
      visiblesList.value = data
    })
  }
  let items
  const gridlayouts = ref(null)
  const getEdit = (item) => {
    items = item
    visibles.value = ''
    visiblesList.value = []
    visible.value = true
  }

  const jgCx = () => {
    post({
      url: 'planSingle/planSchedul/getAreaByToken',
    }).then(({ data }) => {
      lcJwtArray.value = data
    })
  }

  const addJwt = () => {
    titles.value = '新增'
    lcJwt.value = ''
    jgCx()
    getreset()
    layeshow.value = false
    form.long = 20
    form.longs = 20
    form.wide = 10
    form.wides = 10
    form.heigt = 50
    form.heigts = 50
    form.width = 50
    layout.value = []
    backgroundData.value = []
    jwtshowAdd.value = true
  }
  const updataClick = () => {
    titles.value = '修改'
    jgCx()
    setTimeout(() => {
      lcJwtArray.value.forEach((item) => {
        console.log(item.areaName)
        if (item.areaName == ArrayList.value[tabKey.value].story) {
          lcJwt.value = item.areaName + '&' + item.firmId + '&' + item.firm
        }
      })
      console.log(lcJwtArray.value)
      form.wides = ArrayList.value[tabKey.value].detail.form.wides
      form.heigts = ArrayList.value[tabKey.value].detail.form.heigts
      form.width = ArrayList.value[tabKey.value].detail.form.width
        ? ArrayList.value[tabKey.value].detail.form.width
        : 50
    }, 50)
    lcJwt.value = ArrayList.value[tabKey.value].story
    form.long = ArrayList.value[tabKey.value].detail.form.long
    form.longs = ArrayList.value[tabKey.value].detail.form.longs
    form.wide = ArrayList.value[tabKey.value].detail.form.wide
    form.wides = ArrayList.value[tabKey.value].detail.form.wides
    form.heigt = ArrayList.value[tabKey.value].detail.form.heigt
    form.heigts = ArrayList.value[tabKey.value].detail.form.heigts
    layout.value = ArrayList.value[tabKey.value].detail.layout
    backgroundData.value = ArrayList.value[tabKey.value].detail.backgroundData
    generate()
  }
  const changeWidth = (e) => {
    if (gridlayout.value) {
      gridlayout.value.$el.style.width = `${e * form.longs + (form.longs + 1) * 10}px`
    }
  }
  const bc = () => {
    if (!lcJwt.value) {
      Message.error('请选择楼层')
      return
    }
    if (titles.value == '新增') {
      post({
        url: 'planSingle/machineLayout/insert',
        data: [
          {
            story: lcJwt.value.split('&')[0],
            firmId: lcJwt.value.split('&')[1],
            firm: lcJwt.value.split('&')[2],
            detail: JSON.stringify({
              backgroundData: backgroundData.value,
              layout: layout.value,
              form: form,
            }),
          },
        ],
      }).then(({ code }) => {
        if (code == 200) {
          jwtshowAdd.value = false
          selectClick()
        }
      })
    } else {
      post({
        url: 'planSingle/machineLayout/update',
        data: [
          {
            id: ArrayList.value[tabKey.value].id,
            story: lcJwt.value.split('&')[0],
            firmId: lcJwt.value.split('&')[1],
            firm: lcJwt.value.split('&')[2],
            detail: JSON.stringify({
              backgroundData: backgroundData.value,
              layout: layout.value,
              form: form,
            }),
          },
        ],
      }).then(async ({ code }) => {
        if (code == 200) {
          jwtshowAdd.value = false
          await selectClick()
          updateWidth(tabKey.value)
        }
      })
    }
  }
  const updateWidth = (tabIndex) => {
    tabKey.value = null
    setTimeout(() => {
      tabKey.value = tabIndex
    }, 50)
  }
  watch(
    () => tabKey.value,
    (newVal, oldVal) => {
      if (newVal == null) {
        tabchange(oldVal)
      }
    }
  )
  onMounted(async () => {
    document.addEventListener(
      'dragover',
      function (e) {
        mouseXY.x = e.clientX
        mouseXY.y = e.clientY
      },
      false
    )
    await selectClick()
    const { form } = ArrayList.value[0].detail
    if (form.width) {
      instance.refs['gridlayouts' + 0][0].$el.style.width = `${
        form.width * form.longs + (form.longs + 1) * 10
      }px`
      //   gridlayouts.value[0].$el.style.width = `${form.width * form.longs + (form.longs + 1) * 10}px`
    }
  })

  /**----------------------------------------- */
  const form = reactive({
    long: 20,
    longs: 20,
    wide: 10,
    wides: 10,
    heigt: 50,
    heigts: 50,
    width: 50,
  })
  const disabled = ref(false)
  const scaleRadios = ref(100)
  const scaleRadio = ref(1)
  const generate = () => {
    disabled.value = true
    handl()
  }
  const getLong = () => {
    form.long = form.longs - 0
    form.wide = form.wides - 0
    form.heigt = form.heigts - 0
    form.width = form.width - 0
    DragPos.y = form.wides - 0
    console.log('form', form)
  }
  const getreset = () => {
    disabled.value = false
    form.long = 20
    form.longs = 20
    form.wide = 10
    form.wides = 10
    form.heigt = 50
    form.heigts = 50
    form.width = 50
    handfe()
    backgroundData.value = []
  }
  const getZoom = () => {
    scaleRadio.value = scaleRadios.value / 100 - 0
  }
  /**----------------------------------------- */

  /**----------------------------------------- */
  let mouseXY = { x: null, y: null }
  let DragPos = reactive({ x: 0, y: form.wide, w: 1, h: 1, i: null })

  const layout = ref([])

  const layeshow = ref(false)

  const backgroundData = ref([])

  const gridlayout = ref()

  // 显示
  const handl = () => {
    initPreviewData()
    layeshow.value = true
    jwtshowAdd.value = true
    setTimeout(() => {
      nextTick(() => {
        changeWidth(form.width)
      })
    }, 100)
    console.log(form)
  }

  // 隐藏
  const handfe = () => {
    layeshow.value = false
  }

  const initPreviewData = () => {
    for (let i = 0; i < form.long; i++) {
      for (let j = 0; j < form.wide; j++) {
        backgroundData.value.push({
          x: i,
          y: j,
          w: 1,
          h: 1,
          i: Date.now(), // 防止 key 重复
        })
      }
    }
  }

  const drag = (e) => {
    // let parentRect = document.getElementById('content').getBoundingClientRect()
    // let mouseInGrid = false
    // if (
    //     mouseXY.x > parentRect.left &&
    //     mouseXY.x < parentRect.right &&
    //     mouseXY.y > parentRect.top &&
    //     mouseXY.y < parentRect.bottom
    // ) {
    //     mouseInGrid = true
    // }
    // if (mouseInGrid === true && layout.value.findIndex(item => item.i === 'drop') === -1) {
    //     layout.value.push({
    //         x: (layout.value.length * 2) % form.long,
    //         y: layout.value.length + form.long, // puts it at the bottom
    //         w: 1,
    //         h: 1,
    //         i: 'drop'
    //     })
    // }
    // let index = layout.value.findIndex(item => item.i === 'drop')
    // if (index !== -1) {
    //     try {
    //         // gridlayout.value.$children[layout.value.length].$refs.item.style.display = 'none'
    //     } catch { }
    //     let el = gridlayout.value.$children[index]
    //     el.dragging = { top: mouseXY.y - parentRect.top, left: mouseXY.x - parentRect.left }
    //     let new_pos = el.calcXY(mouseXY.y - parentRect.top, mouseXY.x - parentRect.left)
    //     if (mouseInGrid === true) {
    //         gridlayout.value.dragEvent('dragstart', 'drop', new_pos.x, new_pos.y, 1, 1)
    //         DragPos.i = String(index)
    //         DragPos.x = layout.value[index].x
    //         DragPos.y = layout.value[index].y
    //     }
    //     if (mouseInGrid === false) {
    //         gridlayout.value.dragEvent('dragend', 'drop', new_pos.x, new_pos.y, 1, 1)
    //         layout.value = layout.value.filter(obj => obj.i !== 'drop')
    //     }
    // }
  }

  const dragend = (text) => {
    let obj = {}
    if (text == 'operate') {
      obj.text = '机台'
      obj.h = 1
    }
    if (text == 'Shelves') {
      obj.text = '其他'
      obj.h = 1
    }
    if (text == 'passage') {
      obj.text = '通道'
      obj.h = 1
    }
    let parentRect = document.getElementById('content').getBoundingClientRect()
    let mouseInGrid = false
    if (
      mouseXY.x > parentRect.left &&
      mouseXY.x < parentRect.right &&
      mouseXY.y > parentRect.top &&
      mouseXY.y < parentRect.bottom
    ) {
      mouseInGrid = true
    }
    if (mouseInGrid === true) {
      layout.value = layout.value.filter((obj) => obj.i !== 'drop')
      layout.value.push({
        x: DragPos.x,
        y: DragPos.y,
        w: 1,
        h: obj.h,
        i: Date.now(),
        moved: true,
        text: obj.text,
        majorCategory: '',
        middleCategory: '',
        subCategory: '',
        materialCode: '',
        materialName: '',
        specification: '',
        numberId: '',
        id: null,
      })
      try {
        gridLayout.value.$children[layout.value.length].$refs.item.style.display = 'block'
      } catch {}
    }
  }

  // 颜色
  const getColor = (text, type) => {
    let color = ''
    if (text == '机台') {
      // #9fa2a8 未启动 0
      // #ccc 待单 1
      // #ebf13fe1 待纱 2
      // #c1c460e1 洗转机 3
      // #1c9a13 运行 4
      // #2786cf 暂停 5
      // #cf2762 维修 6
      // #c127cf 保养 7
      if (type == 0) color = '#9fa2a8'
      if (type == 1) color = '#ccc'
      if (type == 2) color = '#ebf13fe1'
      if (type == 3) color = '#c1c460e1'
      if (type == 4) color = '#1c9a13'
      if (type == 5) color = '#2786cf'
      if (type == 6) color = '#cf2762'
      if (type == 7) color = '#c127cf'
      if (!type && type != 0) color = 'green'
    }
    if (text == '其他') color = '#c9bbbb'
    if (text == '通道') color = 'rgb(243,217,11)'
    return color
  }

  /**----------------------------------------- */

  const dele = (i) => {
    layout.value.splice(
      layout.value.findIndex((item) => item.i === i),
      1
    )
  }
</script>

<style lang="less" scoped>
  .penclass {
    position: absolute;
    background: blue;
    top: 40%;
    left: -5px;
    width: 10px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
    border-radius: 10px;
  }

  // 操作区
  .operate {
    height: 60px;
    background: green;
    margin: 10px 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  // 货架版
  .Shelves {
    height: 120px;
    background: #c9bbbb;
    margin: 10px 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  // 工作台
  .workbench {
    height: 60px;
    background: red;
    margin: 10px 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  // 通道版
  .passage {
    height: 180px;
    background: rgb(243, 217, 11);
    margin: 10px 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  .clmodule {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // align-self: center;
    position: relative;
    height: 100%;
    color: #000;
  }
  .vue-grid-item .no-drag {
    height: 100%;
    width: 100%;
  }

  .vue-grid-item .minMax {
    font-size: 12px;
  }

  .vue-grid-item .add {
    cursor: pointer;
  }

  .layoutBox {
    width: 100%;
    height: 100%;
  }

  .grid_cals {
    width: 95%;
    // overflow: auto;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    height: 75vh !important;
  }

  .grid_cals2 {
    width: 100%;
    // overflow: auto;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    height: 75vh !important;
  }

  .grid_cals::-webkit-scrollbar {
    display: none;
  }

  .grid-item {
    // border-top: 2px solid rgba(1, 153, 209, 0.5);
    border: #999 dashed 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }

  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgb(159, 162, 168);
  }

  &::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #f2f7ff;
    border: 1px solid #f2f7ff;
  }

  :deep(.arco-btn-size-mini) {
    height: 24px;
    font-size: 12px;
    width: 60px;
    border-radius: var(--border-radius-small);
    white-space: normal;
  }
</style>
